<template>
  <li :class="{'active': $parent.value === value}"
      @click="itemClick">
    <slot></slot>
  </li>
</template>

<script>
  export default {
    name: "item",
    props: {
      value: {
        type: [String, Number],
      }
    },
    methods: {
      itemClick() {
        this.$parent.$emit('input', this.value)
        this.$parent.$emit('onChange', this.value)
      }
    }
  }
</script>

<style scoped lang="scss">
  li.active {
    color: $fontColor;
    /deep/ img {
      opacity: 1;
    }
  }
</style>